<template>
	<view class="beijingse">
		<!-- 头部内容 -->
		<u-sticky>
			<view class="dingbu">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class=" sanshier fonweight textcenter zhonghei">首页</view>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding" style="padding-bottom: 180rpx;">
			<!-- 轮播图 -->
			<view class="">
				<u-swiper :list="list1" keyName="image_text" indicator circular @click="lbtclick"></u-swiper>
			</view>
			<view class="margin_top">
				<u-notice-bar :text="text1" direction="column" @click="enternews($event)"></u-notice-bar>
			</view>
			<!-- 分类 -->
			<view class="flexbetween margin_top">
				<view class="lpbox " @click="tzgywm(2)">
					<view class="xiaohong titletext fonweight">礼品兑换</view>
					<view class="strongtext margin_top2" style="color: #FF9A7D;">好物相送</view>
				</view>
				<view class="ylbox "@click="tzgywm(1)">
					<view class=" titletext fonweight" style="color:#48BD93;">医疗兑换</view>
					<view class="strongtext margin_top2" style="color: #91DDC2;">好物相送</view>
				</view>
			</view>
			<!--  商品推荐-->
			<view class="margin_top">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="ggline margin_right2"></view>
						<view class=" titletext fonweight zhonghei">兑换推荐</view>
					</view>
				</view>
				<view class="ffffff boxbai flexbetween margin_top" v-for="item in list.data" :key="item.id" @click="tzsoxq(item.id)">
					<image class="sptp" :src="item.image_text" mode=""></image>
					<view class="" style="width: 65%;">
						<view class="titletext xiaohei ">{{item.name}}</view>
						<view class="strongtext xiaocheng fonweight margin_top">￥
							<text class="bigtext xiaocheng fonweight">{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbardi :current="0"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				menutop: 0,
				text1: [],
				newsData: [],
				userInfo:{},
			}
		},
		onLoad() {
			uni.hideTabBar()
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			this.getbanner()
			this.init()
			this.getnews()
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "旭日万方礼品商城",
				path: "pages/homepage",
			}
		},
		onShareTimeline: function() {
			return {
				title: "旭日万方礼品商城",
				path: "pages/homepage",
			}
		},
		methods: {
			getnews() { //滚动消息
				httpRequest.request('/api/index/noticeIndex', 'GET', {
					page:1,
					limit:12
				}, false, false, true).then(res => {
					let arr = []
					res.data.data.forEach(item => {
						arr.push(item.name)
					})
					this.text1 = arr
					this.newsData = res.data.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			enternews(index) {
				uni.navigateTo({
					url: "/pages_homepage/gonggaoxq?id=" + this.newsData[index].id
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goodscl/goodsIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					index_rec:1,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			// 跳转礼品兑换以及医疗兑换
			tzgywm(i) {
				uni.navigateTo({
					url: '/pages_homepage/lipinlb?id=' + i
				})
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 跳转商品详情
			tzsoxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpinxq?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ylbox{
		width: 40.5%;
		padding: 44rpx 30rpx 28rpx 20rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/yldh.png');
	}
	.lpbox{
		width: 40.5%;
		padding: 44rpx 30rpx 28rpx 20rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/lpdh.png');
	}
	// 商品
	.sptp {
		width: 198rpx;
		height: 198rpx;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	//结束
	.boxbai {
		padding: 16rpx;
		border-radius: 11rpx;
	}

	.ggline {
		width: 8rpx;
		height: 33rpx;
		border-radius: 23rpx;
		background-color: #FF9341;
	}

	.line {
		width: 2rpx;
		height: 17rpx;
		background: rgba(255, 147, 65, .6);
		border-radius: 1rpx 1rpx 1rpx 1rpx;
	}

	.gongg {
		width: 67rpx;
		height: 47rpx;
	}

	.huangbox {
		padding: 15rpx 20rpx;
		background: rgba(255, 147, 65, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.dingbu {
		padding: 12rpx 30rpx 30rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('https://moveadd.yuntaiqi.com/uploads/20240105/19703999d12abe52e32e91e815d1c76b.png');
	}
</style>